<template>
	<view>
		<view class="content">
			<view class="top">
				<p>生活缴费</p>
			</view>
		</view>
		<view class="btn">
			<view class="title">
				<view class="">
					<ul class="ul1">
						<li>
							<image class="img1" src="../../static/yuan.png">
								<image class="img2" src="../../static/sd.png" mode=""></image>
							</image>	
						</li>
						<li>
							<p>电费</p>
						</li>
						<li>
							<button class="but">缴费</button>
						</li>
					</ul>
					<ul class="ul2">
						<li>
							<image class="img1" src="../../static/yuan.png">
								<image class="img2" src="../../static/sd2.png" mode=""></image>
							</image>	
						</li>
						<li>
							<p class="sf">水费</p>
						</li>
						<li>
							<button class="but">缴费</button>
						</li>
					</ul>
					<ul class="ul3">
						<li>
							<image class="img1" src="../../static/yuan.png">
								<image class="img3" src="../../static/rqf.png" mode=""></image>
							</image>	
						</li>
						<li>
							<p>燃气费</p>
						</li>
						<li>
							<button class="but1">缴费</button>
						</li>
					</ul>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.top{ 
		width: 100%rpx;
		height: 160rpx;
		background-color: #3B73EE;
	}
	.top p{ 
		text-align: center;
		line-height: 160rpx;
		color: white;
		font-weight: 400;
	}
	.btn{ 
		width: 100%rpx;
		height: 1175rpx;
		background-color: #F6F6F6;
	}
	.title .ul1{ 
		width: 630rpx;
		height: 170rpx;
		border: 1rpx solid #FFFFFF;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: absolute;
		top: 250rpx;
		left: 60rpx;
		display: flex;
		align-items: center;
	}
	.title .ul1 .img1{ 
		width: 90rpx;
		height: 90rpx;
		margin-left: 30rpx;
	}
	.title .ul1 .img2{ 
		width: 20rpx;
		height: 40rpx;
		position: absolute;
		top: 60rpx;
		left: 65rpx;
	}
	.title .ul1 p{ 
		color: #757575;
		font-weight: bold;
		margin-left: 20rpx;
	}
	.title .ul1 .but{ 
		width: 140rpx;
		height: 80rpx;
		font-size: 20rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #FFA321;
		color: #FFFFFF;
		margin-left: 240rpx;
	}
	.ul2{ 
		width: 630rpx;
		height: 170rpx;
		border: 1rpx solid #FFFFFF;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: absolute;
		top: 460rpx;
		left: 60rpx;
		display: flex;
		align-items: center;
	}
	.ul2 .img1{
		width: 90rpx;
		height: 90rpx;
		margin-left: 30rpx;
	}
	.ul2 .img2{ 
		width: 20rpx;
		height: 40rpx;
		position: absolute;
		top: 60rpx;
		left: 65rpx;
	}
	.ul2 .sf{ 
		color: black;
		font-weight: bold;
		margin-left: 20rpx;
	}
	.ul2 .but{ 
		width: 140rpx;
		height: 80rpx;
		font-size: 20rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #FFA321;
		color: #FFFFFF;
		margin-left: 240rpx;
	}
	.ul3{
		width: 630rpx;
		height: 170rpx;
		border: 1rpx solid #FFFFFF;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: absolute;
		top: 670rpx;
		left: 60rpx;
		display: flex;
		align-items: center;
	}
	.ul3 .img1{
		width: 90rpx;
		height: 90rpx;
		margin-left: 30rpx;
	}
	.ul3 .img3{ 
		width: 30rpx;
		height: 40rpx;
		position: absolute;
		top: 60rpx;
		left: 60rpx;
	}
	.ul3 p{ 
		color: #757575;
		font-weight: bold;
		margin-left: 20rpx;
	}
	.ul3 .but1{ 
		width: 140rpx;
		height: 80rpx;
		font-size: 20rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #FFA321;
		color: #FFFFFF;
		margin-left: 210rpx;
	}
</style>
